<template>
	<div>
		<BlogList :getBlogList="getBlogList" :blogList="blogList" :totalPage="totalPage" />
	</div>
</template>

<script>
	import { Notification } from 'element-ui';
	// import uaParser from 'ua-parser-js';
	import BlogList from "@/components/blog/BlogList";
	import {
		getBlogList
	} from "@/api/home";
	import {
		SET_IS_BLOG_TO_HOME,
		SET_IS_BLOG_TO_ARCHIVES,
		SET_IS_BLOG_TO_TAG,
		SET_IS_BACK
	} from "@/store/mutations-types";
	import {mapState} from 'vuex';
	
	export default {
		name: "Home",
		components: {
			BlogList
		},
		data() {
			return {
				blogList: [],
				totalPage: 0,
				getBlogListFinish: false,
				timerId: '',
				useros:'',
				userdevice:'',
				userbrowser:'',
			}
		},
		computed: {

			...mapState(['isBack'])
		},
		mounted(){
			window.onscroll = this.justifyPos 
			
			// console.log(navigator.userAgent)

			// console.log(navigator.appVersion)
			if (this.isMobile()) {
				  this.usermsg ='移动设备'
			      // this.$router.replace('/m_index');
			} else {
				  this.usermsg ='PC端'
			}
			var d = new Date()
			 // this.useros = this.getOS()
			 // this.useros = uaParser(navigator.userAgent)
			 var UA = require('ua-device');
			 var input = navigator.userAgent;
			 var output = new UA(input);
			 
			 this.useros = output.os.name;
			 this.userdevice =output.device.manufacturer;
			 this.userbrowser =output.browser.name;
			
			if(this.userdevice == undefined){
				this.userdevice ='未知设备'
			}
			if(this.userbrowser == undefined){
				this.userdevice ='未知浏览器'
			}
			if(this.useros == undefined){
				this.userdevice ='未知系统'
			}
			 
			 
			 console.log(output);
			 // console.log("系统名称",this.useros);
			 // console.log("浏览器",this.userdevice);
			 // console.log("设备名称",this.userbrowser);
			
			 // this.usermsg = this.getBrowser()

			// this.usermsg = navigator.userAgent
			if(!this.getBlogListFinish  ){
				if(this.usermsg === '移动设备'){
					this.$notify({
						title:"欢迎来自"+this.userdevice+"的用户",
						message:"当前使用"+this.userbrowser+"浏览器访问本站，为了更好的体验，建议使用PC端访问",
						duration:10000
					})
				}else{
					this.$notify.success({
						title:"欢迎来自"+this.useros+"的用户",
						message:"当前访问时间："+d.toLocaleString(),
						duration:6000
					})
				}
				
			}
			
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				if (from.name != 'blog') {
					//其它页面跳转到首页时，重新请求数据
					//设置一个flag，让首页的分页组件指向正确的页码
					vm.$store.commit(SET_IS_BLOG_TO_HOME, false)
					vm.$store.commit(SET_IS_BLOG_TO_ARCHIVES, true)
					vm.$store.commit(SET_IS_BLOG_TO_TAG, true)
					vm.$store.commit(SET_IS_BACK, false)
					vm.getBlogList()
					vm.scrollToTop()
					
					// vm.msgSuccess("回到您上次浏览的位置")

				} else {
					
					if(vm.$store.state.isBack){
						//从文章页面跳转到首页时 且是返回键返回的，使用首页缓存，否则不使用
						vm.$store.commit(SET_IS_BLOG_TO_HOME, true)
						// console.log("此时从文章页返回主页，是返回键,isback",vm.$store.state.isBack)
					}else{
						// console.log("此时从文章页返回主页，但不是返回按键")
						//其它页面跳转到首页时，重新请求数据
						//设置一个flag，让首页的分页组件指向正确的页码
						vm.$store.commit(SET_IS_BLOG_TO_HOME, false)
						vm.$store.commit(SET_IS_BLOG_TO_ARCHIVES, true)
						vm.$store.commit(SET_IS_BLOG_TO_TAG, true)
						// vm.$store.commit(SET_IS_BACK, false)
						vm.getBlogList()
						vm.scrollToTop()
					}
					
					
					
					//如果文章页面是起始访问页，首页将是第一次进入，即缓存不存在，要请求数据
					if (!vm.getBlogListFinish) {
						vm.getBlogList()
					}
				}
			})
		},
		watch: {
			// 在当前组件被重用时且不是从blog跳转来的，要重新获取博客列表
			'$route.fullPath'() {
				// console.log("是否是从blog来的",this.isfrom)
				// console.log(this.$store.state.isBack)
				if (this.$route.name === 'blog' && !this.$store.state.isBack) {
					vm.$store.commit(SET_IS_BLOG_TO_HOME, false)
					vm.$store.commit(SET_IS_BLOG_TO_ARCHIVES, true)
					vm.$store.commit(SET_IS_BLOG_TO_TAG, true)
					// console.log("首页被重新调用")
					this.getBlogList()
					this.scrollToTop()
					// console.log("组件重用导致重新获取,且isBack为",this.isBack)
				}
				
			}
			
		},
		
		// beforeRouteLeave(to, from, next) {
			
		// 	// if(to.name == 'blog'){
		// 	// 	// from.meta.keepAlive = true
		// 	// 	// this.scrollTop = this.$refs.scrollView.getOffsets().top //这里使用mand-mobile的钩子方法，如不使用，将滚动元素的scrollTop存下即可

		// 	// }
		// // this.$store.commit(SET_IS_BLOG_TO_HOME, false)
		// 	next()
			
		// },
		methods: {
			
			getBlogList(pageNum) {
				getBlogList(pageNum).then(res => {
					if (res.code === 200) {
						this.blogList = res.data.list
						this.totalPage = res.data.totalPage
						this.$nextTick(() => {
							Prism.highlightAll()
						})
						this.getBlogListFinish = true


					} else {
						this.msgError(res.msg)
					}
				}).catch(() => {
					this.msgError("请求失败")
				})
			},
			justifyPos () {
			                    // 节流；
			                    if (this.timerId) clearTimeout(this.timerId)
			                    this.timerId = setTimeout(() => {
			                        // 获取页面滚动距离之后设置给当前路由的 元信息
			                        this.$route.meta.y = window.pageYOffset
			                    }, 300)
			                },

		   isMobile() {
		   	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
		   	 return flag;
		   },
			
		}
	}
</script>

<style scoped>

</style>
